/*
 * @Description: 用户列表操作页面
 * @Author: 谢涛
 * @Date: 2019-04-22 19:13:58
 * @LastEditTime: 2020-02-25 17:31:15
 * @LastEditors: Please set LastEditors
 */
import React, { Component } from 'react'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import {Form, Input, Select, Modal, Col, Row, message, Button} from 'antd';
import { userApi, departmentsApi, userGroupApi, institutionsApi, institutionsGroupApi } from '@/services/basic'
import '../../../layouts/handleList.css'
import './style.css'
import {ButtonLock} from "../../../components/BaseComponent/forms";

const Option = Select.Option;

class EditItem extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: undefined,//标记保存的是哪一行的数据
            visible: false,
            Institution: [],//医疗机构下拉框的动态值
            UserGroup: [],//用户组下拉框的动态值
            Office: [],//科室下拉框的动态值
            yyids: [],//用于绑定医疗机构和科室,指示当前选中了哪些医疗机构
            rowid: 0,//指示职业机构的行数，初始值为0
            params: [],
            userState: '1',
            gender: 1,
            k: undefined,//专门为解决bug设置的标识当前删除行的k值
            handler: undefined,//当前正在执行的操作类型
            keys: [],
            Yljgz: [],//医院组
        }
    }

    //弹出操作页面
    showModal = (handler, record) => {
        if (record) {//如果有record传过来 说明一定是查看或者更新操作
            const { id } = record;
            this.setState({ visible: true, id, handler })
            this.handleView(id);
        } else {//如果是新增操作 那直接展示弹出框 赋值操作类型
            this.setState({ visible: true, handler })
        }
    }

    //关闭操作页面
    hideModal = () => {
        this.setState({
            id: undefined,//标记保存的是哪一行的数据
            visible: false,
            Institution: [],//医疗机构下拉框的动态值
            //   UserGroup: [],//用户组下拉框的动态值
            Office: [],//科室下拉框的动态值
            yyids: [],//用于绑定医疗机构和科室,指示当前选中了哪些医疗机构
            rowid: 0,//指示职业机构的行数，初始值为0
            params: [],
            userState: '1',
            gender: 1,
            k: undefined,//专门为解决bug设置的标识当前删除行的k值
            handler: undefined,//当前正在执行的操作类型
            keys: [],
            Yljgz: [],//医院组
        })
        this.form.resetFields()
    }

    //Modal框自带的取消操作
    handleCancel = () => {
        this.hideModal();
    }

    //Modal框自带的确认操作
    handleOk = () => {
            this.form.validateFields().then(values => {
                if (this.state.yyids.length === 0) {
                    message.warning('请至少填写一条执业机构信息')
                    return;
                }
                let newItem = this.form.getFieldsValue();
                const { handler, id } = this.state
                const requestType = handler === 'create' ? 'post' : 'put'
                newItem.id = id;
                newItem.params = this.createParams()
                userApi[requestType](newItem)
                    .then((response) => {
                        if (response.code === '1') {
                            this.hideModal();
                            this.props.editItemDone();
                            this.form.resetFields()
                            message.success('操作成功');
                        } else { message.error(`操作失败 ${response.msg}`) }
                    })
            })
                .catch(error => {
                    // eslint-disable-next-line
                    console.dir(error)
                })
    }

    //查看单条
    handleView = (id) => {
        this.setState({ id, visible: true })
        if (id) {
            userApi.get(id)
                .then((res) => {
                    const { yhbh, yhxm, zt, yhsfz, yhxb, lxdh, bz, params, yljgzid, yljgzName,  yhzIds } = { ...res.data }
                    const data = { yhbh, yhxm, zt, yhsfz, yhxb, lxdh, bz, yljgzid, yhzIds }
                    for (let item in data) { if (data[item] === null) { data[item] = '' } }
                    let { yyids } = this.state
                    if (params && params.length !== 0) {
                        const Institution = params.map(item => <Option key={(item.yljg).id} value={(item.yljg).id}>{(item.yljg).yymc}</Option>);
                        const Office = params.map(item => (item.ks).map(i => <Option key={i.id} value={i.id}>{i.ksmc}</Option>));
                        const rowid = params.length;
                        const keys = [];
                        params.map((item, index) => yyids.push({ k: index, value: item.yyid }))
                        for (let i = 0; i < rowid; i++) { keys.push(i) }
                        this.setState({
                            params,
                            Institution,
                            Office,
                            yyids,
                            rowid,
                            keys,
                            yhzIds,
                            Yljgz: <Option value={yljgzid} key={yljgzid}>{yljgzName}</Option>
                        }, () => {
                            for (let i = 0; i < rowid; i++) {
                                this.form.setFieldsValue({
                                    [`yyid${i}`]: params[i].yyid,
                                    [`ksIds${i}`]: params[i].ksIds,
                                })
                            }
                        })
                    }
                    this.form.setFieldsValue({ ...data });
                })
        }
    }

    //医疗机构下拉框获得焦点时的回调
    onInstitutionFocus = (k) => {
        institutionsApi.getSelectOption()
            .then((res) => {
                if (res.data && res.data.length !== 0) {
                    const Institution = res.data.map(item => <Option key={item.yyid} value={item.yyid}>{item.yymc}</Option>);
                    this.setState({ Institution })
                }
            })
    }

    //当科室下拉框获取焦点时的回调
    onOfficeFocus = (k) => {
        const { yyids } = this.state
        const currentIndex = yyids.findIndex(item => item.k === k)
        if (this.state.yyids[currentIndex] !== undefined) {
            departmentsApi.getAllYyks(`${this.state.yyids[currentIndex].value}`)
                .then((res) => {
                    if (res.data && res.data.length !== 0) {
                        const Office = res.data.map(item => <Option key={item.ksid} value={item.ksid}>{item.ksmc}</Option>);
                        this.setState({ Office })
                    }
                })
        } else { message.warning('请先选择对应的公司') }
    }

    //用户组获取焦点时回调
    getUsergroup = () => {
        userGroupApi.getSelectOption({})
            .then((res) => {
                if (res.records && res.records.length !== 0) {
                    const UserGroup = res.records.map(item => <Option key={item.id} value={item.id}>{item.yhzmc}</Option>);
                    this.setState({ UserGroup })
                }
            })
    }

    //点击了行头部的小加号
    add = () => {
        const keys = this.state.keys;
        this.setState({ rowid: this.state.rowid + 1 });
        const nextKeys = keys.concat(this.state.rowid);
        this.setState({ keys: nextKeys });
    };

    //医疗机构下拉框的值发生改变时的回调
    onInstitutionChange = (value, option, k) => {
        //k可以标记当前点的是哪一个医疗机构框 value标记当前这个医疗机构框的值
        //医疗机构发生改变 对应行的科室和用户组置空
        this.form.resetFields([`ksIds${k}`, `yhzIds${k}`])
        let { yyids } = this.state;
        if (yyids.length !== 0) {
            //如果已选的机构id数组中包含当前的这个yyid 说明重复选择了
            let logicArr = yyids.map(item => item.value === value)
            if (logicArr.includes(true)) {
                //如果当前改变的这个医疗机构下拉框的选定值 在yyids里面能找到 那就警告不可重复选择
                message.warning("执业机构不可重复选择")
                const keys = this.state.keys;
                this.setState({ keys: keys.filter(key => key !== k) });
                return false;
                //不包含直接替代原有索引 如果是新增的也无妨
            } else { yyids.splice(k, 1, { k, value }) }
        } else { yyids.push({ k, value }) }
        this.setState({ yyids })
    }


    //点击了新增行每一行后面的那个删除按钮
    remove = k => {
        const { rowid, yyids } = this.state;
        if (rowid === 0) {
            message.warning("请至少保留一条执业机构信息")
            return false;
        } else {
            const deleteIndex = yyids.findIndex(item => item.k === k)
            yyids.splice(deleteIndex, 1)
            const keys = this.state.keys;
            this.setState({ keys: keys.filter(key => key !== k) });
            this.setState({ yyids, k })
        }
    }

    //处理生成符合格式要求的参数
    createParams = () => {
        const keys = this.state.keys;
        const { length } = keys
        const maxIndex = keys[length - 1]
        let params = [];
        let newParams = [];
        for (let i = 0; i < maxIndex + 1; i++) {
            params.push(this.form.getFieldsValue([`yyid${i}`, `ksIds${i}`, `yhzIds${i}`]))
        }
        params.map((item) => {
            if (Object.values(item)[0] !== undefined) {
                newParams.push({
                    yyid: Object.values(item)[0],
                    ksIds: Object.values(item)[1],
                    yhzIds: Object.values(item)[2]
                })
            }
            return undefined
        })
        return newParams
    }

    onUserStateChange = (value) => {
        this.setState({ userState: value })
    }

    onIdentityBlur = () => {
        const { yhsfz } = this.form.getFieldsValue()
        if (yhsfz) {
            const mark = yhsfz[yhsfz.length - 2]
            const dynamicSex = mark % 2 === 0 ? 2 : 1
            this.form.setFieldsValue({ 'yhxb': dynamicSex })
            this.setState({ gender: dynamicSex })
        }
    }

    onYljgzSearch = () => {
        institutionsGroupApi.getSelectOption().then(res => {
            if (res !== null && res.length !== 0) {
                const Yljgz = res.map(item => <Option value={item.id} key={item.id}>{item.yyzmc}</Option>)
                this.setState({ Yljgz })
            } else {
                message.warning('暂无数据')
            }
        })
    }
    // 表单布局
    formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
    // 机构列表
    getItems = () => {
        const keys = this.state.keys;
        const { handler } = this.state
        let formItems = keys.map((k, index) => (
            <Row key={k} className='danamicForm'>
                <Col span={10}>
                    <Form.Item
                        {...this.formItemLayout}
                        label={'公司'}
                        name={`yyid${k}`}
                        rules={[{ required: true, message: '此项为必填项!' }]}
                        validateTrigger={['onChange', 'onBlur']}
                    >
                        <Select
                            disabled={handler === 'view' ? true : false}
                            allowClear={handler === 'view' ? false : true}
                            placeholder="请选择公司"
                            filterOption={false}
                            showSearch={true}
                            notFoundContent={false}
                            onChange={(value, option) => this.onInstitutionChange(value, option, k)}
                            onFocus={() => this.onInstitutionFocus(k)}
                            onBlur={() => this.setState({ Institution: [] })}
                        >
                            {this.state.Institution}
                        </Select>
                    </Form.Item>
                </Col>

                <Col span={10}>
                    <Form.Item
                        {...this.formItemLayout}
                        label={'部门选择'}
                        name={`ksIds${k}`}
                        validateTrigger={['onChange', 'onBlur']}

                    >
                        <Select
                            disabled={handler === 'view' ? true : false}
                            allowClear={handler === 'view' ? false : true}
                            placeholder="请选择部门"
                            mode="multiple"
                            notFoundContent={false}
                            filterOption={false}
                            showSearch={true}
                            showArrow={true}
                            onFocus={() => this.onOfficeFocus(k)}
                            onBlur={() => this.setState({ Office: [] })}
                        >
                            {this.state.Office}
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={2} offset={2}>
                    <DeleteOutlined
                        className="dynamic-delete-button"
                        style={{ color: '#ff9f40', fontSize: '16px', lineHeight: '45px', marginLeft: '-10px' }}
                        onClick={() => this.remove(k)} />
                </Col>
            </Row>
        ))
        return formItems
    }
    // 页面渲染完成后，初始化数据请求
    componentDidMount() {
        // 数据字典

        // 公共用户组
        this.getUsergroup()
    }

    render() {
        const { handler } = this.state;

       


        return (
            <div className='handle-header'>
                <Modal title=""
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                       footer={this.state.handler === "view" ? null : [
                           <Button onClick={this.handleCancel}>取消</Button>,
                           <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
                       ]}
                    width="1000px"
                    style={{ top: 60 }}
                    maskClosable={false}
                    className='handleList UsersList-handle'
                >
                    <div className="formHeader">
                        <span className='handle-title'>{`${handler === 'view' ? '查看' : handler === 'create' ? '新增' : '更新'}用户信息`}</span>
                    </div>

                    <Form autoComplete="off" onSubmit={this.handleOk} ref={form => this.form = form} >
                        <Row gutter={8}>
                            <Col span={8}>
                                <Form.Item label="用户编号"
                                    name="yhbh"
                                    rules={[{ required: true, message: '此为必填项' }]}
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input
                                        disabled={handler === 'create' ? false : true}
                                        allowClear={handler === 'create' ? true : false}
                                        placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="用户姓名"
                                    name="yhxm"
                                    rules={[{ required: true, message: '此项为必填项' }]}
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="用户状态"
                                    name="zt"
                                    rules={[{ required: true, message: '此项为必填项' }]}
                                    initialValue={this.state.userState}
                                >
                                    <Select
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="请选择状态"
                                        onChange={this.onUserStateChange}
                                    >
                                        <Select.Option value="0">停用</Select.Option>
                                        <Select.Option value="1">启用</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={8}>
                            <Col span={8}>
                                <Form.Item label="身份证号"
                                    name="yhsfz"
                                    rules={[
                                        { required: true, message: '必填项'},
                                        { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号!' }
                                    ]}
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        onBlur={this.onIdentityBlur}
                                        placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="用户性别"
                                    name="yhxb"
                                    initialValue={this.state.gender}
                                >
                                    <Select
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="请选择性别">
                                        {/* <Select.Option value={0}>未知</Select.Option>
                                        <Select.Option value={1}>男</Select.Option>
                                        <Select.Option value={2}>女</Select.Option>
                                        <Select.Option value={9}>未说明</Select.Option>
                                         */}
                                         {
                                             this.props.bookRender('xb')
                                         }
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="联系电话"
                                    name="lxdh"
                                    rules={[{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }]}
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="请输入" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row >
                            <Col span={8}>
                                <Form.Item label="公司类型"
                                    name="yljgzid"
                                >
                                    <Select
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="输选择"
                                        filterOption={false}
                                        showSearch={true}
                                        notFoundContent={null}
                                        // showArrow={false}
                                        onFocus={this.onYljgzSearch}
                                    >
                                        {this.state.Yljgz}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    // {...formItemLayout}
                                    label={'用户组'}
                                    name="yhzIds"
                                    rules={[{ required: true, message: '此项为必填项!' }]}
                                >
                                    <Select
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        mode="multiple"
                                        filterOption={false}
                                        showArrow={true}
                                        placeholder="请选择用户组"
                                        notFoundContent={false}
                                    >
                                        {this.state.UserGroup}
                                    </Select>

                                </Form.Item>
                            </Col>
                        </Row>
                        <Row >
                            <Col span={16}>
                                <Form.Item label="备注"
                                    name="bz"
                                >
                                    <Input
                                        disabled={handler === 'view' ? true : false}
                                        allowClear={handler === 'view' ? false : true}
                                        placeholder="请输入" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row >
                            <Col span={24} className='extraInfo'>
                               公司部门信息(必填)
                                <PlusOutlined className='plusIcon' onClick={this.add}></PlusOutlined>
                            </Col>
                        </Row>
                        {this.getItems()}
                    </Form>
                </Modal>
            </div>
        );
    }
}
export default EditItem